<template>
    <div>
        <div style="text-align: left;" v-for="(menuItem, index) in menuList" :key="index">
            <el-submenu v-if="menuItem.children && menuItem.children.length>0" :index="index+menuItem.title">
                <template slot="title">
                    <i :class="menuItem.icon"></i>
                    <span slot="title">{{ menuItem.title}}</span>
                </template>
                <sub-menu :menuList="menuItem.children"></sub-menu>    
            </el-submenu>
            <el-menu-item v-else :index="index+menuItem.title">
                <i :class="menuItem.icon"></i>
                <span slot="title">{{ menuItem.title }}</span>
            </el-menu-item>
           
        </div>
    </div>
</template>

<script>
export default {
    name:"SubMenu",
    props: ["menuList"]
}
</script>

<style></style>